import React from 'react';
import { Image } from 'antd-mobile';
import type { ChatMessage as ChatMessageType } from '../../hooks/useChat';
import './index.css';

interface ChatMessageProps {
  message: ChatMessageType;
}

const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {
  const isImage = (file: File) => file.type.startsWith('image/');
  const isPdf = (file: File) => file.type === 'application/pdf';

  return (
    <div className={`chat-message ${message.role}`}>
      <div className="message-content">
        <div className="message-avatar">
          {message.role === 'user' ? '👤' : '🤖'}
        </div>
        <div className="message-body">
          {message.content && (
            <div className="message-text">
              {message.content}
            </div>
          )}
          {message.files && message.files.length > 0 && (
            <div className="message-files">
              {message.files.map((fileItem) => (
                <div key={fileItem.id} className="file-item">
                  {isImage(fileItem.file) && fileItem.preview && (
                    <Image
                      src={fileItem.preview}
                      alt="uploaded image"
                      className="file-image"
                    />
                  )}
                  {isPdf(fileItem.file) && (
                    <div className="file-icon pdf-icon">
                      📄 {fileItem.file.name}
                    </div>
                  )}
                  {!isImage(fileItem.file) && !isPdf(fileItem.file) && (
                    <div className="file-icon">
                      📎 {fileItem.file.name}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      <div className="message-time">
        {new Date(message.timestamp).toLocaleTimeString()}
      </div>
    </div>
  );
};

export default ChatMessage;
